<template>
  <view class="box">
        <view  class="title-box" @click="titleButton">
          
            <view class="box-item">
                <image src="./image/Location.png" mode="scaleToFill" class="box-item1"></image>
                <text class="box-item2">收货地址</text>
                <text class="box-item3">编辑</text>
            </view>
            
             <view class="box-item">
                <image src="./image/Profile.png" mode="scaleToFill" class="box-item1"></image>
                <text class="box-item2">庄曙光</text>
            </view>
            
             <view class="box-item">
                <image src="./image/Fill_1.png" mode="scaleToFill" class="box-item1"></image>
                <text class="box-item2">18416678977</text>
            </view>
            
             <view class="box-item">
                <image src="./image/Home.png" mode="scaleToFill" class="box-item1"></image>
                <text class="box-item2">山东省潍坊市奎文区恒大名都</text>
            </view>
            
        </view>
        <!-- --------------------------------------------------- -->
        <view class="content-box">
          <view class="box-item">
              <image src="./image/Ticket.png" mode="scaleToFill" class="box-item1"></image>
              <text class="box-item2">优惠方式</text>
              <text class="box-item3">添加</text>
          </view>
          <view class="box-fater">
            <view class="toobox">代金券</view>
            <view class="toobox">积分</view>
          </view>
        </view>
        
        <!-- ------------------------------------------------------- -->
        <view class="footer-box">
              <view class="box1">
                <text class="box-item">价格</text>
                <text class="box-item">$80</text>
              </view>
              <view class="box1">
                <text class="box-item">运费</text>
                <text class="box-item">$0</text>
              </view>
              <view class="box1">
                <text class="box-item">代金券</text>
                <text class="box-item">-$20</text>
              </view>
              <view class="box1">
                <text class="box-item">积分</text>
                <text class="box-item">-$20</text>
              </view>
        </view>
        
        <button class="xiaBotton"></button>
  </view>
</template>

<script setup>
  const titleButton=()=>{
    console.log('12312123123');
    uni.navigateTo({
      url:"/pages/shouhuo/index"
    })
  }
</script>

<style lang="scss" scoped>
  .box{
    background:#f5f5f5;
      height: 100vh;
        .title-box{
          background-color: #fff;
          display: flex;
          flex-direction: column;
          padding: 20px 29px;
          margin: auto;
          width: 732rpx;
          height:344rpx;
          opacity: 1;
          border-radius: 16rpx;
          // background: rgba(85, 85, 255, 1.0);
                .box-item{
                  margin-top: 12px;
                  display: grid;
                  grid-template-columns: 1fr 7fr 1fr;
                      .box-item1{
                        width: 14px;
                        height: 17px;
                      }
                      .box-item2{
                        font-size: 16px;
                        font-weight: 700;
                      }
                      .box-item3{
                        color: rgba(254, 120, 37, 1);
                      }
                }
                 .box-item:nth-of-type(n+2) .box-item2{
                        font-size: 14px;
                        font-weight: 500;
                        letter-spacing: 0px;
                        line-height: 20px;
                        color: rgba(151, 151, 151, 1);
                 }
        }
        // ------------------------
        .content-box{
          background-color: #fff;
          display: flex;
          flex-direction: column;
          padding: 1px 29px;
          margin: auto;
          margin-top: 25px;
          width: 366px;
          height:124px;
          border-radius: 16rpx;
          .box-fater{
            display: flex;
            .toobox{
              margin-top: 12px;
              margin-left: 8px;
              width: 145px;
              height: 48px;
              background-image: url(./image/Subtract.png);
              // background-repeat: no-repeat;
              // background-position: center; 
              font-weight: 700;
              line-height: 48px;
              text-align: center;
              color: rgba(255, 255, 255, 1);
              font-size: 16px;
            }
          }
           .box-item{
             margin-top: 12px;
             display: grid;
             grid-template-columns: 1fr 7fr 1fr;
             align-items: center;
                 .box-item1{
                   width: 14px;
                   height: 17px;
                 }
                 .box-item2{
                   font-size: 16px;
                   font-weight: 700;
                 }
                 .box-item3{
                   color: rgba(254, 120, 37, 1);
                 }
           }
        }
        
        // =-----------------------------------------=
        .footer-box{
          border-bottom: 1px solid rgba(218,218,218,1);
            display: flex;
            flex-direction: column;
            padding: 20px 29px;
            margin: auto;
            margin-top: 24px;
            width: 732rpx;
            height:344rpx;
            opacity: 1;
            border-radius: 16rpx;
              .box1{
                display: flex;
                justify-content: space-between;
                  .box-item{
                    margin-top: 10px;
                    font-size: 14px;
                    color: rgba(151,151,151,1);
                  }
              }
        }
        
        .xiaBotton{
          width: 366px;
          height: 64px;
          opacity: 1;
          border-radius: 20px;
          background: linear-gradient(259.67deg, rgba(229, 69, 0, 0.81) 36.98%, rgba(255, 92, 0, 0.79) 57.29%, rgba(255, 153, 33, 1) 92.71%), rgba(254, 120, 37, 1);
          box-shadow: 1px 8px 17px  rgba(35, 35, 35, 0.04), 2px 16px 21px  rgba(35, 35, 35, 0.04);
          display: flex;
          justify-content: center;

        }
  }
</style>